<template>
  <div class="app-container">
    <applyList class="left" title="提交申请" @setComponent="setComponent">11</applyList>
    <card :title="title" class="right">
      <template v-slot:content>
        <div class="content">
          <component :is="componentName" :projectNameByList="projectName" :projectNameInfoList="projectNameInfoList" @deleteProjectName="deleteProjectName"/>
        </div>
      </template>
    </card>
  </div>
</template>

<script>
import project from "@/api/workflow/project.js";
import card from "@/views/homePage/components/card";
import applyList from "./components/applyList.vue";
import purchaseParity from "./components/purchaseParity.vue";
import purchaseApply from "./components/purchaseApply.vue";
import financeTripApply from "./components/financeTripApply.vue";
import purchaseContact from "./components/purchaseContact.vue";
import purchaseStamp from "./components/purchaseStamp.vue";
import purchasePayment from "./components/purchasePayment.vue";
import financeEntertain from "@/views/workflow/apply/components/financeEntertain.vue";
import financeSubmit from "@/views/workflow/apply/components/financeSubmit.vue";
import financeTravel from "@/views/workflow/apply/components/financeTravel.vue";
import financeImprest from "@/views/workflow/apply/components/financeImprest.vue";
import financeBudget from "@/views/workflow/apply/components/financeBudget.vue";
import financePayment from "@/views/workflow/apply/components/financePayment.vue";
import humanRecruit from "@/views/workflow/apply/components/humanRecruit.vue";
import humanEntry from "@/views/workflow/apply/components/humanEntry.vue";
import humanProbation from "@/views/workflow/apply/components/humanProbation.vue";
import humanTransfer from "@/views/workflow/apply/components/humanTransfer.vue";
import humanSalary from "@/views/workflow/apply/components/humanSalary.vue";
import humanDepart from "@/views/workflow/apply/components/humanDepart.vue";
import humanReplace from "@/views/workflow/apply/components/humanReplace.vue";
import humanLeave from "@/views/workflow/apply/components/humanLeave.vue";
import administrateContact from "@/views/workflow/apply/components/administrateContact.vue";
import adminStamp from "@/views/workflow/apply/components/adminStamp.vue";
import adminEntry from "@/views/workflow/apply/components/adminEntry.vue";
import adminUse from "@/views/workflow/apply/components/adminUse.vue";
import adminBorrow from "@/views/workflow/apply/components/adminBorrow.vue";
import adminBus from "@/views/workflow/apply/components/adminBus.vue";
import adminCar from "@/views/workflow/apply/components/adminCar.vue";

export default {
  data() {
    return {
      title:'我的申请',
      componentName: "",
      projectName:"",
      projectNameInfoList:[],
    };
  },
  components: {
    card,
    applyList,
    purchaseParity,
    financeTripApply,
    purchaseApply,
    purchaseContact,
    purchaseStamp,
    purchasePayment,
    financeEntertain,
    financeSubmit,
    financeTravel,
    financeImprest,
    financeBudget,
    financePayment,
    humanRecruit,
    humanEntry,
    humanProbation,
    humanTransfer,
    humanSalary,
    humanDepart,
    humanReplace,
    humanLeave,
    administrateContact,
    adminStamp,
    adminEntry,
    adminUse,
    adminBorrow,
    adminBus,
    adminCar,
  },
  methods:{
    setComponent(apply){
      this.title = `我的申请（${apply.applyName}）`
      this.componentName = apply.component;
    },
    deleteProjectName(){
      this.projectName='';
      console.log(this.projectName)
    }
  },
  mounted() {
    if (this.$route.query.apply){
      this.projectName=this.$route.query.apply.projectName;
    }
    project.getProjectName().then(res=>{
      this.projectNameInfoList=res.data;
    })
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  padding: 0.125rem;
  overflow: hidden;
  background: #edefef;
  letter-spacing: 0.02rem;
  display: flex;
  .left {
    height: 100%;
    width: 24%;
    background: #ffffff;
    margin-right: 0.125rem;
  }
  .right {
    height: 100%;
    width: calc(76% - 0.125rem);
    background: #ffffff;
    // margin-right: 0.125rem;
  }
}
.content {
  width: 100%;
  height: 100%;
}
</style>
